<template>
  <!-- 头部容器 -->
  <div class="header">
    <el-row type="flex" justify="space-between" class="main">
      <!-- 1.logo -->
      <div class="logo">
        <!-- nuxt的超链接 -->
        <nuxt-link to="/">
          <img src="http://157.122.54.189:9093/images/logo.jpg" alt />
        </nuxt-link>
      </div>

      <!-- 2.菜单项 -->
      <el-row type="flex" class="navs">
        <nuxt-link to="/">首页</nuxt-link>
        <nuxt-link to="/post">旅游攻略</nuxt-link>
        <nuxt-link to="/hotel">酒店</nuxt-link>
        <nuxt-link to="/air">国内机票</nuxt-link>
      </el-row>

      <!-- 3.登录/用户信息 -->
      <el-row type="flex" align="middle">
        <!-- 如果用户存在则展示信息 -->
        <!-- el-dropdown：下拉框 -->
        <el-dropdown v-if="$store.state.user.userInfo.token">
          <el-row type="flex" align="middle" class="el-dropdown-link">
            <nuxt-link to="#">
              <!-- 用户头像 -->
              <img :src="$axios.defaults.baseURL+$store.state.user.userInfo.user.defaultAvatar" alt />
              &nbsp;&nbsp;&nbsp;&nbsp;{{$store.state.user.userInfo.user.nickname}}
            </nuxt-link>
            <!-- 饿了么字体图标 -->
            <i class="el-icon-caret-bottom el-icon-right"></i>
          </el-row>
          <!-- el-dropdown-menu：下拉菜单 -->
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item>
              <nuxt-link to="#">个人中心</nuxt-link>
            </el-dropdown-item>
            <el-dropdown-item>
              <div @click="exitLogin">退出</div>
            </el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>

        <!-- 不存在用户则展示登录注册 -->
        <nuxt-link to="/user/login" class="account-link" v-else>登录 / 注册</nuxt-link>
      </el-row>
    </el-row>
  </div>
</template>

<script>
export default {
  methods: {
    //1.退出登录
    exitLogin() {
      //清掉vuex的userInfo数据
      this.$store.commit("user/setUserInfo", {});
      //显示退出弹框
      this.$message.success("退出登录成功");
    }
  }
};
</script>

<style lang="less" scoped>
//头部
.header {
  height: 60px;
  line-height: 60px;
  background: #fff;
  border-bottom: 1px solid #ddd;
  //弹性盒子，左右阴影
  box-shadow: 0 3px 0 #f5f5f5;
  box-sizing: border-box;
  //入口
  .main {
    width: 1000px;
    //左右居中
    margin: 0 auto;
  }
  //1.LOGO
  .logo {
    width: 156px;
    padding-top: 8px;
    img {
      //图片转为块级元素
      display: block;
      width: 100%;
    }
  }
  //2.菜单项
  .navs {
    margin: 0 20px;
    flex: 1;
    //nuxt-link的样式写法同a标签
    a {
      display: block;
      padding: 0 20px;
      height: 60px;

      text-decoration: none;
      color: #000;
      font-size: 18px;
      box-sizing: border-box;
      //伪类选择器
      &:hover,
      &:focus,
      &:active {
        border-bottom: 5px solid #409eff;
        color: #409eff;
      }
    }
    //选中高亮  精准匹配
    /deep/ .nuxt-link-exact-active {
      background: #409eff;
      //!important顶级权重
      color: #ffff !important ;
    }
  }
  //位置样式
  .message {
    height: 36px;
    line-height: 1;
    //鼠标样式
    cursor: pointer;
    .el-icon-bell {
      margin-right: 2px;
      font-size: 18px;
    }
  }
  //3.用户信息(存在用户)
  .el-dropdown-link {
    margin-left: 20px;
    color: teal;
    &:hover {
      img {
        border-color: #409eff;
      }
    }
    a {
      color: teal;
      text-decoration: none;
      display: block;
    }
    img {
      width: 32px;
      height: 32px;
      //垂直对齐方式
      vertical-align: middle;
      border: 2px solid #fff;
      border-radius: 50px;
    }
  }
  //3.用户信息(不在用户)
  .account-link {
    font-size: 18px;
    margin-left: 10px;
    color: teal;
    text-decoration: none;
    &:hover {
      color: #409eff;
      text-decoration: underline;
    }
  }
}
//头部组件高亮设置
.header .navs .nuxt-link-active:not(:first-child),
.header .navs .nuxt-link-exact-active {
  background: #409eff;
  color: #fff !important;
}
</style>